<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="id"
        label="id"
        width="150">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="120">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="120">
      </el-table-column>
      <el-table-column
        prop="subject"
        label="学科"
        width="300">
      </el-table-column>
      <el-table-column
        prop="date"
        label="入学日期"
        width="120">
      </el-table-column>
      <el-table-column
        prop="job"
        label="是否就业"
        width="120">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="deleteUser(scope.row)" type="text" size="small">删除</el-button>
          <el-button type="text" size="small" @click="updateUser(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @next-click='nextChange'
      @prev-click='prevChange'
      @current-change='currentChange'
      background
      layout="prev, pager, next"
      :page-size="end"
      :total="totalCount">

    </el-pagination>
  </div>
</template>

<script>
  import { mapState,mapMutations } from 'vuex'
  export default {
    data(){
      return {
        tableData:[],
        loading:true,
        start:0,
        end:2,
        totalCount:0
      }
    },
    methods: {
      nextChange(val){

        this.start = (val-1)*2; 
        this.getUser();
      },
      prevChange(val){
        this.start = (val-1)*2;
        this.getUser();
      },
      currentChange(val){
        this.start = (val-1)*2;
        this.getUser();
      },
      deleteUser(row) {

        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http.post("/api/user/deleteStudent",{
              id:row.id
            }).then((res)=>{
              this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              this.start=0;
              this.getCount();
              this.getUser();

            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });


      },
      updateUser(){
        console.log(row);
      },
      getUser(){
        this.loading=true;
        this.$http.post("/api/user/selectStudent",{
          start:this.start,
          end:this.end
        }).then((res)=>{
          this.loading=false;
          this.tableData=res.data;
        })
      },
      getCount(){
        this.$http.post("/api/user/selectCount").then((res)=>{
          this.totalCount=res.data[0]['count(*)'];
        })
      }
    },
    mounted(){
      this.getCount();
    	this.getUser();
    }
  }
</script>